<template>
  <div :class="{ 'completed': completed }">
    <input type="checkbox" v-model="checked" @change="toggleCompletion">
    {{ title }}
    <button @click="removeTodo">Remove</button>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    completed: Boolean
  },
  data() {
    return {
      checked: this.completed
    }
  },
  methods: {
    toggleCompletion() {
      this.$emit('update:completed', !this.checked);
    },
    removeTodo() {
      this.$emit('remove-todo');
    }
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>
